<!doctype html>
<html lang="zh-CN">
<head>
    <script src="./js/base/templet.js"></script>
    <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
</head>

<body>
<div id="app">

    <com_head></com_head>
    <!--内容-->
    <div class="container" style="margin-top:76px">
        <div class="col-md-3">
            <div class="list-group">
                <a href="user.html" class="list-group-item active">
                    <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
                </a>
                <a href="pwd.html" class="list-group-item">
                    <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
                </a>
                <a href="comments.html" class="list-group-item">
                    <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
                </a>
                <a href="loginlog.html" class="list-group-item">
                    <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
                </a>
                <a href="moviecol.html" class="list-group-item">
                    <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
                </a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;会员中心</h3>
                </div>
                <div class="panel-body">
                    <form role="form" onsubmit="return toSubmit()">
                        <fieldset>
                            <div class="form-group">
                                <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                                <input id="input_name" class="form-control" placeholder="昵称" v-model="user.name"
                                       type="text"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="input_email"><span
                                            class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                                <input id="input_email" class="form-control" placeholder="邮箱" v-model="user.email"
                                       type="email"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                                <input id="input_phone" class="form-control" placeholder="手机" v-model="user.phone"
                                       type="text"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="input_face"><span
                                            class="glyphicon glyphicon-picture"></span>&nbsp;头像</label>
                                <img :src="user.face" class="img-responsive img-rounded">
                                <a class="btn btn-primary" style="margin-top:6px;"><span
                                            class="glyphicon glyphicon-open"></span>&nbsp;上传头像</a>
                                <input id="input_face" class="form-control" name="face" type="hidden" required>
                            </div>
                            <div class="form-group">
                                <label for="input_info"><span class="glyphicon glyphicon-edit"></span>&nbsp;简介</label>
                                <textarea class="form-control" rows="10" id="input_info" v-model="user.info"></textarea>
                            </div>
                            <button type="submit" class="btn btn-success"><span
                                        class="glyphicon glyphicon-saved"></span>&nbsp;保存修改
                            </button>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <com_foot></com_foot>

</div>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            user: {}
        },
        components: {
            "com_head": com_head,
            "com_foot": com_foot
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("user"))
            $(function () {
                new WOW().init();
            })
            $(document).ready(function () {
                $("img.lazy").lazyload({
                    effect: "fadeIn"
                });
            });
        },
        methods: {
            // 表单提交
            submit() {
                updataUser(this.user).then(res => {
                    if (400 == res.data.code) {
                        this.err.flag = true
                        this.err.msg = res.data.msg
                    } else {
                        sessionStorage.setItem("user", JSON.stringify(res.data.data))
                        sessionStorage.setItem("name", res.data.data.name)
                        this.user = res.data.data
                    }
                })
            }
        }
    })

    // 阻止表单默认提交事件
    function toSubmit() {
        vm.submit()
        return false
    }
</script>
</body>
</html>
